<div id="container" class="span9 paddingnone fixContainerWidth">
    <div class="row-fluid floatleft" id="div-connection">
        <div class="span4 paddingtop20 paddingleft20">
            <div class="row-fluid">
                <img id="imgSignalIcon" style="float: left; padding-right: 30px;" />
            </div>
            <div class="row-fluid" style="margin-left:40px;color:#9d0b0e;font-weight:bold;font-size:21px;text-align: left">
                <span class="spanNetworkType" i18n="true" data-trans="networkType" style="display: none;"></span>
            </div>
            <div class="row-fluid">
                <span style="font-weight:bold;display: none;" class="spanNetworkOperator" data-trans="networkOperator"></span>
            </div>
            <div class="row-fluid">
                <span id="spanConnectStatusText" i18n="true" data-trans="connectStatusText" style="display: none;"></span>
            </div>
            <div class="row-fluid hide" style="font-size:12px;" id="connection_failed_note">
                <div trans="connection_failed_note">Connection failed to the network. Please retry later or search for networks from the network settings page</div>
                <div><a trans="net_setting" href="http://192.168.0.1/index.html#dial_setting" style="color:#9d0b0e;text-decoration:underline;cursor:pointer">Connection Settings</a></div>
            </div>
            <div id="index_connection_button_new" style="margin-top: 12px;">
                <div class="power_off_btn hide" data-bind="click:turnOffDevice" title="Power">&nbsp;</div>
                <div id="mobile_connect_btn" data-bind="enable:canConnect(),attr:{&quot;class&quot;: conBtnCss},css:{&quot;disabled&quot;:!canConnect()},click: connectHandler" onclick="connectHandler()" title="Mobile data" style="float: left">&nbsp;</div>
            </div>
            <div class="home_split">
            </div>
            <div id="login_box_info" class="row-fluid">
                <div class="connection row-fluid">
                    <h2 data-trans="statis_currSession" style="color:#9d0b0e">Current Session</h2>
                    <div style="font-size: 12px;">
                        <div class="row-fluid">
                            <span class="span6 side-left"><label data-trans="statis_ReceiveSent" style="text-align: left;font-weight: bold">Received/Sent:</label></span>
                            <span class="span6"><label id="currentReceivedSent" data-trans="currentReceivedSent" style="text-align: left;"></label></span>
                        </div>
                        <div class="row-fluid hide">
                            <span class="span5 side-left"><label trans="homeSend" style="text-align: left;font-weight: bold">homeSend</label></span>
                            <span class="span5"><label data-bind="text: currentSent" style="text-align: left;">1.24MB</label></span>
                        </div>
                        <div class="row-fluid">
                            <span class="span6 side-left"><label data-trans="connected_time" style="text-align: left; font-weight: bold">Duration:</label></span>
                            <span class="span6"><label id="current_time" data-trans="connected_Time" style="text-align: left; "></label></span>
                        </div>
                    </div>
                </div>
                <div class="wlan_status row-fluid">
                    <h2 data-trans="wifi_status" style="color:#9d0b0e">WiFi Status:</h2>
                    <div style="font-size: 12px;">
                        <div class="row-fluid">
                            <span class="span6 side-left"><label data-trans="wifi_status" style="text-align: left; font-weight: bold"></label>:</span>
                            <span class="span6"><label id="lblWifiSwitch" data-trans="wifi_switch" style="text-align: left;"></label></span>
                        </div>
                        <div class="row-fluid">
                            <span class="span6 side-left"><label data-trans="current_wlan_user" style="text-align: left;font-weight: bold"></label>:</span>
                            <span class="span6"><label id="spanClientCount" data-bind="wifiStatusNum" style="text-align: left;"></label></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="div-station" class="span8 form-body">
            <div id="connected1" class="row-fluid home_icon_div">
                <div class="home_ussd_icon">
                    <div style="float:left;font-size:20px;margin-top:30px;color:#9d0b0e">
                        <span data-trans="services"></span>
                    </div>
                </div>
                <div class="home_ussd_icon">
                    <div style="width:100px;margin-left:13px;cursor:pointer" onclick="sendToNet('*6363*3#')" data-bind="click:function(){sendToNet(&#39;*6363*3#&#39;)}"> <img src="img/icon_r1_c1.png"> </div>
                    <div class="home_ussdicon_text">
                        <span data-trans="home_check_balance">Check Balance</span>
                    </div>
                </div>
                <div class="home_ussd_icon">
                    <div style="width:100px;margin-left:13px;cursor: pointer" onclick="sendToNet('*6363*4#')" data-bind="click:function(){sendToNet(&#39;*6363*4#&#39;)}"> <img src="img/icon_r1_c3.png"> </div>
                    <div class="home_ussdicon_text">
                        <span data-trans="home_check_usage">Check Bundle Usage</span>
                    </div>
                </div>
                <div class="home_ussd_icon">
                    <div style="width:100px;margin-left:13px;cursor: pointer" onclick="sendToNet('*6363*2#')" data-bind="click:function(){sendToNet(&#39;*6363*2#&#39;)}"> <img src="img/icon_r1_c14.png"> </div>
                    <div class="home_ussdicon_text">
                        <span data-trans="home_mbb_number">Show My MBB<br>Number</span>
                    </div>
                </div>
                <div class="home_ussd_icon">
                    <div style="width:100px;margin-left:13px;cursor: pointer" onclick="sendToNet('*6363*6#')" data-bind="click:function(){sendToNet(&#39;*6363*6#&#39;)}"> <img src="img/icon_r1_c7.png"> </div>
                    <div class="home_ussdicon_text">
                        <span data-trans="home_mbb_manu">Add/Change MBB <br>Contact No</span>
                    </div>
                </div>
                <div class="home_ussd_icon hide">
                    <div class="home_smsicon_text">
                        <a style="font-size: 14px;color:#12a5d6;display: inline-block;margin-top: 8px;margin-left: 18px;vertical-align: middle;" target="_blank" href="https://www.jazz.com.pk/4gdevices" trans="terms_conditions">Terms &amp; Conditions</a>
                    </div>
                </div>
            </div>

            <div id="connected2" class="row-fluid home_icon_div">
                <div style="margin-top: 18px;float: left;width: 80px;height:80px;color:#9d0b0e">
                    <div style="float:left;font-size:20px;margin-top:30px;">
                        <span data-trans="home_bundles">Subscribe Bundles</span>
                    </div>
                </div>
                <div class="home_ussd_icon hide">
                    <div style="width:100px;margin-left:13px;cursor: pointer" onclick="sendToNet('*117*71#')" data-bind="click:function(){sendToNet(&#39;*117*71#&#39;)}"> <img src="img/icon_25gb.png"> </div>
                    <div class="home_ussdicon_text">
                        <span data-trans="monthly_bundle">Monthly Bundle</span>
                    </div>
                </div>
                <div class="home_ussd_icon">
                    <div style="width:100px;margin-left:13px;cursor: pointer" onclick="sendToNet('*117*73#')" data-bind="click:function(){sendToNet(&#39;*117*73#&#39;)}"> <img src="img/icon_60gb.png"> </div>
                    <div class="home_ussdicon_text">
                        <span data-trans="monthly_bundle">Monthly Bundle</span>
                    </div>
                </div>
                <div class="home_ussd_icon">
                    <div style="width:100px;margin-left:13px;cursor: pointer" onclick="sendToNet('*117*36#')" data-bind="click:function(){sendToNet(&#39;*117*36#&#39;)}"> <img src="img/icon_100gb.png"> </div>
                    <div class="home_ussdicon_text">
                        <span data-trans="monthly_bundle">Monthly Bundle</span>
                    </div>
                </div>
                <div class="home_ussd_icon">
                    <div style="width:100px;margin-left:13px;cursor: pointer" onclick="sendToNet('*117*74#')" data-bind="click:function(){sendToNet(&#39;*117*74#&#39;)}"> <img src="img/icon_r3_c8.png"> </div>
                    <div class="home_ussdicon_text">
                        <span data-trans="monthly_bundle">Monthly Bundle</span>
                    </div>
                </div>
                <div class="home_ussd_icon">
                    <div style="width:100px;margin-left:13px;cursor: pointer" onclick="sendToNet('*117*15#')" data-bind="click:function(){sendToNet(&#39;*117*15#&#39;)}"> <img src="img/icon_50gb.png"> </div>
                    <div class="home_ussdicon_text">
                        <span data-trans="home_36g">3 Months Bundle</span>
                    </div>
                </div>
                <div class="home_ussd_icon">
                    <div style="width:100px;margin-left:13px;cursor: pointer" onclick="sendToNet('*117*16#')" data-bind="click:function(){sendToNet(&#39;*117*16#&#39;)}"> <img src="img/icon_100gb.png"> </div>
                    <div class="home_ussdicon_text">
                        <span data-trans="home_75g">6 Months Bundle</span>
                    </div>
                </div>
            </div>

            <div style="font-size:20px;margin-top:20px;color:#9d0b0e">
                <span data-trans="home_recharge">Recharge</span>
            </div>
            <div>- <span data-trans="home_recharge_note"></span></div>
            <div id="connected4" style="min-height:70px;">
                <div class="row-fluid ussdInput span8">
                    <div class="span11" style="min-height:70px;">
                        <input name="USSD_Content" id="USSD_Content" class="ussd_content" data-bind="value:homeUssdInput,valueUpdate:&#39;afterkeydown&#39;" type="text" style="width:370px">
                    </div>
                    <div class="span1" style="min-height:70px;">
                        <input type="button" data-trans="send" class="btn-1 marginright10" onclick="sendToNet('')" data-bind="click:function(){sendToNet(&#39;&#39;)}" value="Send">
                    </div>
                </div>
            </div>

            <div style="font-size:20px;color:#9d0b0e">
                <span data-trans="home_dial_ussd">Dial USSD</span>
            </div>
            <div>
                <label data-trans="click">Click</label>
                <a href="index.html#ussd" style="color:#12a5d6" data-trans="here">here</a>
                <label data-trans="home_to_dial_ussd"></label>
            </div>
            <div>
                <label data-trans="change_wifi_note">To change wifi name and password please</label>
                <a href="javascript: void(0)" onclick="gotoWifiBasic()" style="color:#12a5d6" data-trans="click_here">click here</a>.
            </div>
            <form id="frmUSSD" style="display:none" novalidate="novalidate" autocomplete="off">
                <div class="header">
                    <span id="popTitleForCus2"></span>
                    <span id="closeForCus" data-bind="click:cancelAddAct_1" style="float: right;display:none"><img width="20px" style="cursor: pointer;" src="img/dialog_close_btn.png"></span>
                </div>
                <div class="content">
                    <div class="row-fluid paddingleft25" style="padding-left: 15px;">
                        <div style="width:510px;height:200px;padding:10px; line-height:25px;margin-top:15px;">
                            <span class="span2"><span id="USSD_Send_Sent"></span></span>
                            <span class="span9" style="margin-left: -10px;"><span id="USSD_Send_Content"></span></span>
                            <span class="span2" style="margin-left: 0px; line-height: 20px; min-height: 20px;"><span id="USSD_Send_Received"></span></span>
                            <span class="span9" style="margin-left: -10px;margin-top:20px;"><textarea style="padding-top:4px;" id="USSD_Content_check_services" rows="8" cols="50" readonly="readonly"></textarea></span>
                        </div>
                    </div>
                    <div class="form-buttons">
                        <div class="button_wrapper">
                            <div class="button_left" style="margin-top:4px;">
                                <div class="button_right">
                                    <span class="button_center">
                                        <input type="button" trans="ussd_cancel" class="btn-1 marginright10" onclick="cancelUSSDReply()" value="Cancel">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="ussd_action" data-bind="visible: ussd_action()!=0" class="row-fluid paddingleft25 jazz-home-ussd-action-1" style="padding-left: 15px;display: none;">
                        <div style="width:510px;padding:10px; line-height:25px;">
                            <div class="span2">
                                <span data-trans="ussd_reply_to">Reply to</span>
                                <i class="colorRed">*</i>
                            </div>
                            <div class="span9" style="margin-left: -10px;">
                                <input type="text" class="required" name="index_USSD_reply" id="index_USSD_reply" size="20" data-bind="value:USSDReply">
                                <label for="index_USSD_reply" id="lblerrindex_USSD_reply" style="display:none;" class="error">Required</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-buttons jazz-home-ussd-action-1" style="display: none;">
                        <div class="button_wrapper">
                            <div class="button_left" style="margin-top:4px;">
                                <div class="button_right">
                                    <span class="button_center">
                                        <input type="button" trans="ussd_reply" class="btn-1 marginright10" value="Reply" onclick="indexReplyToNet()">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $("#list-nav").find(".active").removeClass("active")
        $("#list-nav").find("[mid='home']").addClass("active");
    });

    // 定时获取基础数据
    setInterval(function() {
        // 设备状态数据
        var _tempStatusInfo = window._service.getStatusInfo();
        // 信号图标
        $("#imgSignalIcon").attr("src", window._status.getSignalIcon(_tempStatusInfo));
        // 链接状态
        $("#spanConnectStatusText").html(window._status.getConnectStatusText(_tempStatusInfo)).show();
        $("#mobile_connect_btn").attr("class", window._status.getMobileConnectBtnClass(_tempStatusInfo.connectStatus));
        // Received/Sent:
        $("#currentReceivedSent").text(getDisplayVolume2(ts.realtime_rx_bytes) + " / " + getDisplayVolume2(ts.realtime_tx_bytes));
        $('#current_time').html(transSecond2Time(ts.realtime_time));
        $("#lblWifiSwitch").text($.i18n.prop(_tempStatusInfo.wifiStatus ? "on" : "off"));
    }, 1000);

    function sendToNet(command) {
        _needLogin(function(need) {
            if (need) {
                return;
            }

            if ("" == command) {
                var homeUssdInput = $("#USSD_Content").val();
                if (14 != homeUssdInput.length) {
                    showAlert("home_recharge_note");
                    return;
                }

                command = "*123*" + homeUssdInput + "#"
            }

            // 判断ussd是否初始化过
            if (!window._isInitedUSSD) {
                window._service.USSDReplyCancel(function(result) {});
                window._isInitedUSSD = true;
            }

            sendToNetUtil(command, function(result) {
                showPromptForCus("", "", "400px", "", "#frmUSSD", "new_service", "690px");
                $("#USSD_Send_Sent").html("Sent:");
                $("#USSD_Send_Content").html(command);
                $("#USSD_Send_Received").html("Received:");
                $("#USSD_Content_check_services").val(result)
            });
        }, true);
    }

    function showUSSDLoading(isLoading, content) {
        var parentObj = $("#confirm-container")[0];
        if (!parentObj) {
            parentObj = {
                offsetWidth: 624,
                offsetHeight: 404,
                offsetLeft: 640
            };
        }

        var childrenWidth = 420;
        var left = ussdLoadingLeft(parentObj, childrenWidth);
        $('body').append('' +
            '<div id="confirm-overlay" class="simplemodal-overlay simplemodal-ussd-loading" style="opacity: 0.8; height: 100%; width: 1903px; position: fixed; left: 0px; top: 0px; z-index: 2001;"></div>' +
            '<div id="confirm-container" role="dialog" class="simplemodal-container simplemodal-ussd-loading simplemodal-ussd-loading-jazz-home" style="position: fixed; z-index: 2002; height: 160px; width: ' + childrenWidth + 'px; left: ' + left + 'px; top: 240px;">' +
            '   <a class="modalCloseImg simplemodal-close" title="Close"></a>' +
            '   <div tabindex="-1" class="simplemodal-wrap" style="height: 100%; outline: 0px; width: 100%; overflow: visible;">' +
            '       <div id="loading" class="simplemodal-data" style="display: block;">' +
            '           <div class="header">' +
            '               <span id="loadMsg">' + $.i18n.prop(isLoading ? "waiting" : "Warning") + '</span>' +
            '           </div>' +
            '           <div style="text-align: center">' +
            '               <img id="loadingImg" src="img/loading.gif" style="padding-top:30px;' + (isLoading ? "" : "display:none;") + '" />' +
            '               <div id="loading_container">' + (isLoading ? "" : $.i18n.prop(content)) + '</div>' +
            '           </div>' +
            '           <div class="buttons">' +
            '               <input type="button" class="btn-1" data-trans="yes" value="Yes" onclick="hideUSSDLoading();" ' + (!isLoading ? "" : "style='display:none;'") + ' />' +
            '           </div>' +
            '       </div>' +
            '   </div>' +
            '</div>');

        clearInterval(window.HOME_USSD_LOADING_INTERVAL);
        HOME_USSD_LOADING_INTERVAL = setInterval(function() {
            var loadingDiv = $(".simplemodal-ussd-loading-jazz-home")[0];
            if (location.hash != '#home' || !loadingDiv) {
                clearInterval(window.HOME_USSD_LOADING_INTERVAL);
                return;
            }

            if (!window.HOME_USSD_LOADING_PARENT_LEFT) {
                window.HOME_USSD_LOADING_PARENT_LEFT = 1;
            }
            var parentLoadingObj = $("#confirm-container")[0];
            if (parentLoadingObj.offsetLeft == window.HOME_USSD_LOADING_PARENT_LEFT) {
                return;
            }

            var left = ussdLoadingLeft(parentLoadingObj, 420);
            $(loadingDiv).css("left", left);
            window.HOME_USSD_LOADING_PARENT_LEFT = parentLoadingObj.offsetLeft;
        }, 300);
    }

    function ussdLoadingLeft(parentObj, childrenWidth) {
        return (parentObj.offsetWidth / 2) - (childrenWidth / 2) + parentObj.offsetLeft;
    }

    function hideUSSDLoading() {
        $('.simplemodal-ussd-loading').remove();
    }

    // 回复USSD消息
    function indexReplyToNet() {
        var command = $("#index_USSD_reply").val();
        if (('string' != typeof(command)) || ('' == command)) {
            $("#lblerrindex_USSD_reply").css('display', 'inline-block').show();
            return;
        }

        $("#lblerrindex_USSD_reply").hide();
        showUSSDLoading(true);

        var params = {};
        params.operator = "ussd_reply";
        params.strUSSDCommand = command;
        params.sendOrReply = "reply";

        window._service.getUSSDResponse(params, function(result, content) {
            hideUSSDLoading();
            if (result) {
                if (content.ussd_action == "1") {
                    $(".jazz-home-ussd-action-1").show();
                } else {
                    $(".jazz-home-ussd-action-1").hide();
                }
                $("#USSD_Content_check_services").val(decodeMessage(content.data, true));
                indexResetUSSD();
            } else {
                showUSSDLoading(false, content);
            }
        });
    }

    function indexResetUSSD() {
        $("#index_USSD_reply").val("");
    }

    function connectHandler() {
        if (loginPopupCheck()) {
            return !1;
        }

        var _tempStatusInfo = window._service.getStatusInfo();
        var connectedStatus = checkConnectedStatus(_tempStatusInfo.connectStatus)
        if (connectedStatus) {
            showLoading("disconnecting");
            window._service.disconnect({}, function(e) {
                e.result ? successOverlay('success') : errorOverlay('fail')
            })
        } else {
            if (window._service.getStatusInfo().roamingStatus) {
                showConfirm("dial_roaming_connect", function() {
                    doConnect();
                })
            } else {
                doConnect(true);
            }
        }
    }

    function doConnect(tip) {
        var statusInfo = window._service.getStatusInfo();
        var trafficResult = window._status.getTrafficResult(statusInfo);
        if (statusInfo.limitVolumeEnable && trafficResult.showConfirm) {
            var confirmMsg = null;
            if (trafficResult.usedPercent > 100) {
                confirmMsg = {
                    msg: 'traffic_beyond_connect_msg'
                };
                window._status.setTrafficAlertPopuped(true);
            } else {
                confirmMsg = {
                    msg: 'traffic_limit_connect_msg',
                    params: [trafficResult.limitPercent]
                };
                window._status.setTrafficAlert100Popuped(false);
            }

            showConfirm("", confirmMsg, function() {
                realConnect(tip);
            });
        } else {
            realConnect(tip);
        }
    }

    function realConnect(tip) {
        showLoading("connecting");
        window._service.connect({}, function(e) {
            if (!tip) {
                return
            }

            e.result ? successOverlay('success') : errorOverlay('fail')
        })
    }

    function loginPopupCheck() {
        var _tempStatusInfo = window._service.getStatusInfo();
        if (0 == _tempStatusInfo.isLoggedIn) {
            return _needLogin(null, true), !0;
        }
    }

    function gotoWifiBasic() {
        _needLogin(function(need) {
            if (need) {
                return;
            }

            location.hash = "#settings_wifi_basic";
        }, true);
    }

    function sendToNetUtil(command, callback) {
        if ('string' != typeof command || '' == command) {
            showAlert('UssdErrorInput')
            return
        }

        var isValid = true
        isValid = isValid && (startWith(command, '*') || startWith(command, '#'))
        isValid = isValid && !(startWith(command, '***') || startWith(command, '####'))
        isValid = isValid && (endWith(command, '*') || endWith(command, '#'))
        if (!isValid) {
            showAlert('ussd_incorrect')
            return
        }

        showLoading('ussd_waitResponse')

        var params = {
            operator: "ussd_send",
            strUSSDCommand: command,
            sendOrReply: "send"
        };
        window._service.getUSSDResponse(params, function(flag, content) {
            hideLoading()
            if (flag) {
                if (content.ussd_action == 1) {
                    $('.jazz-home-ussd-action-1').show();
                } else {
                    $('.jazz-home-ussd-action-1').hide();
                }

                var result = decodeMessage(content.data, true)
                for (var i = 1; i <= 10; i++) {
                    var str = i + ">"
                    result = result.replace(str, '<br>' + str)
                }

                if (callback) {
                    callback(result);
                }
            } else {
                showAlert(content)
            }
        })
    }

    function cancelUSSDReply() {
        $.modal.close();
        $(".placeholder").next("label").remove();

        // 如果ussd_action=1要下发ussd_cancel指令
        if (window.JAZZ_USSD_ACTION == 1) {
            window.JAZZ_USSD_ACTION = 0;
            window._service.USSDReplyCancel(function(result) {});
        }
    }
</script>